<template>
  <a-layout-header class="layout-header">
    <div class="layout-header-title">
      <div class="header-left"></div>
      <div class="header-center">
        <span class="header-center-text">{{header}}</span>
      </div>
      <div class="header-right">
        <header-avatar @getPlatformName="getPlatformName"></header-avatar>
      </div>
    </div>
    <div class="layout-header-nav">
      <div class="layout-header-nav-left">
        <div class="layout-home" @click="toHome()"></div>
        <!-- <img class="layout-home" src="@/assets/img/icon-home.png" alt=""> -->
        <template v-for="(item, index) in nav">
          <div
            class="nav-item"
            :class="{ active: active === index + 1 }"
            :key="index"
            v-if="index < nav.length / 2"
            @click="goPage(item.path, index + 1)"
          >
            {{ item.name }}
          </div>
        </template>
      </div>
      <!--<div class="layout-header-nav-middle">-->
      <!--  {{ platformName}}-->
      <!--</div>-->
      <div class="layout-header-nav-right">
        <template v-for="(item, index) in nav">
          <div
            class="nav-item"
            :class="{ active: active === index + 1 }"
            :key="index"
            v-if="index >= nav.length / 2"
            @click="goPage(item.path, index + 1)"
          >
            {{ item.name }}
          </div>
        </template>
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import { mapGetters } from "vuex";
import HeaderAvatar from "@/layouts/header/HeaderAvatar";

export default {
  name: "layout-header",
  computed: {
    ...mapGetters(['userInfo'])
  },
  components: { HeaderAvatar },
  data() {
    return {
      nav: [
        {
          name: "古迹全览",
          path: "https://10.56.192.75:7788/monumentsOverview",
        },
        {
          name: "安全监管",
          path: "https://10.56.192.75:7788/securityRegulation",
        },
        {
          name: "保护落实",
          path: "https://10.56.192.75:7788/protectionImplementation",
        },
        {
          name: "活化开发",
          path: "https://10.56.192.75:7788/activityDevelopment",
        },
        {
          name: "公众反响",
          path: "https://10.56.192.75:7788/publicReverse",
        },
        {
          name: "场景评价",
          path: "https://10.56.192.75:7788/nine",
        },
      ],
      active: 0,
      platformName: undefined,
      header: undefined
    };
  },
  methods: {
    toHome () {
      window.location.href = `https://gxl.wenzhou.gov.cn:7788/home?user_id=${this.userInfo.userId}&accessToken=${this.$store.state.user.accessToken}`
    },
    goPage(path, index) {
      if (!path) return;
      this.active = index;
      // this.$router.push({
      //   path,
      // });
      window.location.href = `${path}?user_id=${this.userInfo.userId}&accessToken=${this.$store.state.user.accessToken}`
    },
    getPlatformName(platformName){
      this.platformName = platformName
      if(platformName === '超级管理员平台') {
        this.header = '古系列保护·云端守卫'
      } else {
        this.header = platformName.replace('数据区平台', '古系列保护·云端守卫')
      }
    }
  },
  created() {
    console.log(this.userInfo)
  }
};
</script>

<style scoped lang="less">
.layout-header {
  //height: auto;
  padding: 0;
  background-color: transparent;
  .layout-header-title {
    display: flex;
    //height: 80px;
    background: url("~@/assets/img/layout/layout-header-bg.png") no-repeat top;
    background-size: cover;

    .header-left,
    .header-right {
      width: 25%;
      height: 40px;
      line-height: 40px;
    }
    .header-center {
      width: 50%;
      line-height: 70px;

      text-align: center;

      .header-center-text {
        -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
        -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
        background-image: linear-gradient(180deg, #FEFEFF 0%, #B8D8FF 31%, #5EB6FF 62%, #83C4FF 77%, #C6DFFF 100%);
        filter: drop-shadow(0px 5px 3px #000000);
        font-size: 36px;
        font-family: 优设标题黑;
      }
    }

    .header-right {
      padding-left: 100px;
    }
  }
  .layout-header-nav {
    height: 60px;
    display: flex;
    align-items: flex-end;
    margin-top: -24px;
    .layout-header-nav-middle {
      flex: 0 0 auto;
      width: 190px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      background: url("@/assets/img/secondary.png") no-repeat center;
      background-size: 190px 42px;
    }
    .layout-header-nav-left,
    .layout-header-nav-right {
      display: flex;
      align-items: center;
      width: 50%;
      .nav-item {
        width: 180px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        font-size: 20px;
        color: #8ad8ff;
        cursor: pointer;
        user-select: none;

        &:hover {
          color: #bee8ff;
        }

        &.active {
          color: #ffffff;
        }
      }
    }
    .layout-header-nav-left {
      .nav-item {
        padding-right: 30px;
        background: url("~@/assets/img/layout/layout-header-menu-left-bg.png")
          no-repeat center / 100%;
      }
    }
    .layout-header-nav-right {
      justify-content: flex-end;
      .nav-item {
        padding-left: 30px;
        background: url("~@/assets/img/layout/layout-header-menu-right-bg.png")
          no-repeat center / 100%;
      }
    }
  }
  .layout-home {
    background: url('@/assets/img/icon-home.png') center/cover no-repeat;
    width: 80px;
    height: 49px;
    cursor: pointer;
  }
  .layout-home:hover {
    background: url('@/assets/img/icon-home-active.png') center/cover no-repeat;
  }
}
</style>
